<template>
  <div class="model3">
    <div class="val">{{ props.value }}</div>
    <div class="name" :style="`font-size:${props.nameSize}px ;`">{{ props.name }}</div>
  </div>
</template>
<script setup lang="ts">
// import { reactive, ref } from 'vue'
/** @api */
interface Props {
  name: string;
  value: string | number;
  nameSize?: string;
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  name: '厂区总览',
  value: '0%',
  nameSize:'16'
});
/** @数据 */
/** @生命周期 */
/** @方法 */
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.model3 {
  display: inline-block;
  width: 100px;
  height: 120px;
  overflow: hidden;
  background: url('@/assets/imgs/icon-05.png') no-repeat center 35px;
  background-size: 77px 35px;
  text-align: center;

  .val {
    height: 80px;
    font-size: 18px;
  }

  .name {
    font-size: 16px;
  }

}
</style>